<script lang="ts">
// bom
export default {
  name: "bomPage",
  components: { addProcessRoute }
};
</script>

<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from "vue";
import { changeHeight } from "/@/utils/public.mixin";
import { VxeTableInstance } from "vxe-table";
import {
  queryBomListByBomComId,
  queryBomComListSelectV1,
  exportBom
} from "/@/api/basic/bom";
import addProcessRoute from "/@/views/basic/workmanship/addProcessRoute.vue";
import { errorMessage } from "/@/utils/message";
import { handleCutZero } from "/@/utils/date";
import { useRoute } from "vue-router";
const route = useRoute();
const routeName = route.name as string;
const page = reactive({
  pageNum: 1,
  pageRow: 20,
  totalResult: 0
});

const table = reactive({
  loading: false,
  listData: [] as any[],
  tableData: [] as any[],
  tableHeight: 0, //表格高度
  treeConfig: {
    expandAll: true,
    expandRowKeys: [1],
    parentField: "parentId",
    children: "nextBomList"
  },
  treeId: "" as any,
  listQuery: {
    code: "",
    name: ""
  }
});
const xTable = ref({} as VxeTableInstance);
const bomComId = ref([]);
const searchEvent = async () => {
  if (await queryBomComListSelect()) {
    await queryBomListByBomComId(bomComId.value)
      .then((res: any) => {
        table.loading = true;
        if (res.code === 0) {
          table.tableData = res.data;
        }
        table.loading = false;
      })
      .catch(() => {
        errorMessage("查询失败");
        table.loading = false;
      });
  }
};
const queryBomComListSelect = async () => {
  const data: any = {};
  Object.assign(data, table.listQuery);
  if (table.listQuery.code == "" && table.listQuery.name == "") {
    errorMessage("请输入料号或品名");
    return false;
  }
  data.pageNum = page.pageNum;
  data.pageRow = 2000;
  return await queryBomComListSelectV1(data)
    .then((res: any) => {
      if (res.code === 0) {
        bomComId.value = res.data.list.map(function (item) {
          return item.bomComId;
        });
        return true;
      } else {
        return false;
      }
    })
    .catch(() => {
      return false;
    });
};
// 绑定工艺路线
const addProcessDialog = ref(false);
const processDetailCode = ref("");
const processDialogShow = code => {
  addProcessDialog.value = true;
  processDetailCode.value = code;
};
const processDialogClose = () => {
  addProcessDialog.value = false;
  processDetailCode.value = "";
};

// 下载Bom
const exportBomData = async () => {
  if (await queryBomComListSelect()) {
    await exportBom(bomComId.value).then((res: any) => {
      if (res.code == 500) {
        errorMessage(res.message);
      } else {
        const fileBlob = res;
        const fileUrl = URL.createObjectURL(fileBlob); //将blob转成url地址
        const element = document.createElement("a");
        element.setAttribute("href", fileUrl);
        element.setAttribute("downLoad", "BOM.xls");
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      }
    });
  }
};

// mounted
onMounted(() => {
  nextTick(() => {
    // 将表格和工具栏进行关联
    // queryBomComSelect();
    // queryAll(); //新增时的下拉框
    table.tableHeight = changeHeight();
  });
});
</script>

<template>
  <div>
    <!-- 工具栏 -->
    <vxe-form :data="table.listQuery">
      <vxe-form-item title="料号" field="code">
        <template #default="{ data }">
          <el-input
            v-model="data.code"
            clearable
            placeholder="请输入料号"
            size="small"
            style="width: 100%"
          ></el-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="品名" field="name">
        <template #default="{ data }">
          <el-input
            v-model="data.name"
            clearable
            placeholder="请输入品名"
            size="small"
            style="width: 100%"
          ></el-input>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <vxe-button status="primary" icon="fa fa-search" @click="searchEvent"
          >查询</vxe-button
        >
        <vxe-button
          @click="exportBomData"
          status="primary"
          icon="fa fa-download"
          v-auth="routeName + ':download'"
          >导出数据</vxe-button
        >
      </vxe-form-item>
    </vxe-form>
    <!-- 列表 -->
    <vxe-table
      resizable
      show-overflow
      keep-source
      border
      ref="xTable"
      row-id="id"
      :row-config="{ isCurrent: true, isHover: true, keyField: 'id' }"
      :print-config="{}"
      :export-config="{}"
      :loading="table.loading"
      :tree-config="table.treeConfig"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      :height="table.tableHeight"
      :data="table.tableData"
    >
      <vxe-column
        field="name"
        title="品名"
        tree-node
        min-width="400"
      ></vxe-column>
      <vxe-column field="code" title="料号" min-width="130"></vxe-column>
      <vxe-column
        field="processStepName"
        title="工序列表"
        min-width="150"
      ></vxe-column>
      <!-- <vxe-column
        field="processStepName"
        title="工序名称"
        min-width="120"
      ></vxe-column> -->
      <vxe-column field="useNum" title="数量" min-width="120"></vxe-column>
      <vxe-column
        field="figureNumber"
        title="别名"
        min-width="150"
      ></vxe-column>
      <vxe-column field="modelNumber" title="机型" min-width="120"></vxe-column>
      <vxe-column field="bomType" title="财务分类" min-width="100"></vxe-column>
      <vxe-column
        field="itemCategory"
        title="库存分类"
        min-width="200"
      ></vxe-column>
      <vxe-column
        field="deliveryState"
        title="交货状态"
        min-width="100"
      ></vxe-column>
      <vxe-column
        field="modelAttributes"
        title="形态属性"
        min-width="100"
      ></vxe-column>
      <!-- <vxe-column field="productLine" title="产品系列" min-width="120"></vxe-column> -->
      <vxe-column
        field="measureUnit"
        title="计量单位"
        min-width="120"
      ></vxe-column>
      <vxe-column
        field="assistMeasureUnit"
        title="辅计量单位"
        min-width="120"
      ></vxe-column>
      <vxe-column
        field="workingHours"
        title="标准加工工时(小时)"
        min-width="160"
      ></vxe-column>
      <vxe-column
        field="periodNew"
        title="新产品周期(天)"
        min-width="120"
      ></vxe-column>
      <vxe-column
        field="periodConventional"
        title="常规周期(天)"
        min-width="120"
      ></vxe-column>
      <vxe-column
        field="periodUrgency"
        title="紧急周期(天)"
        min-width="120"
      ></vxe-column>
      <vxe-column
        field="periodVeryUrgency"
        title="特急周期(天)"
        min-width="120"
      ></vxe-column>
      <vxe-column
        field="inspectionHours"
        title="检验工时(小时)"
        min-width="140"
      ></vxe-column>
      <vxe-column
        field="reviewHours"
        title="复审工时(小时)"
        min-width="140"
      ></vxe-column>
      <!-- <vxe-column field="texture" title="材质" min-width="120"></vxe-column> -->
      <vxe-column field="longt" title="长度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.longt
          }}{{
            row.longt && row.lengthUnitCN ? "(" + row.lengthUnitCN + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="width" title="宽度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.width
          }}{{
            row.width && row.widthUnitCN ? "(" + row.widthUnitCN + ")" : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="thickness" title="厚度/高度(单位)" min-width="140">
        <template #default="{ row }">
          {{ row.thickness
          }}{{
            row.thickness && row.thicknessUnitCN
              ? "(" + row.thicknessUnitCN + ")"
              : ""
          }}
        </template>
      </vxe-column>
      <vxe-column
        field="specification"
        title="规格"
        min-width="120"
      ></vxe-column>
      <vxe-column field="weight" title="成本(单位)" min-width="100">
        <template #default="{ row }">
          {{ handleCutZero(row.weight)
          }}{{
            handleCutZero(row.weight) && row.weightUnitCN
              ? "(" + row.weightUnitCN + ")"
              : ""
          }}
        </template>
      </vxe-column>
      <vxe-column field="leadTime" title="采购周期(单位)" min-width="120">
        <template #default="{ row }">
          {{ row.leadTime
          }}{{
            row.leadTime && row.leadTimeUtil ? "(" + row.leadTimeUtil + ")" : ""
          }}
        </template>
      </vxe-column>
      <!-- <vxe-column field="stock" title="库存" min-width="120"></vxe-column> -->
      <vxe-column field="fixNumber" title="定盘数" min-width="120"></vxe-column>
      <vxe-column title="操作" width="110" fixed="right">
        <template #default="{ row }">
          <vxe-button
            type="text"
            icon="fa fa-plus"
            @click="processDialogShow(row.code)"
            v-auth="routeName + ':addProcess'"
            >工艺路线</vxe-button
          >
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 弹框弹框添加、升级工艺路线 -->
    <add-process-route
      :dialogShow="addProcessDialog"
      :detailCode="processDetailCode"
      @processDialogClose="processDialogClose"
      @searchEvent="searchEvent"
    ></add-process-route>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.keyword-lighten {
  color: #000;
  background-color: #ffff00;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

// .vxe-button.type--button:not(.is--round) {
//   border-radius: 0;
// }
:deep(.el-dialog__body) {
  padding-bottom: 0;
  margin-bottom: -10px;
}
:deep(.el-dialog__body .btn-quicknext svg),
:deep(.el-dialog__body .btn-quickprev svg) {
  height: 28px;
}
.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.el-input-number {
  width: 100% !important;
}
</style>
